<template>
	<view class="searchBox">
		<scroll-view scroll-y="true" class="shop" @scrolltolower="lower()">
			<u-empty v-if="shoplist.length == 0 && finish" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
			<view class="shop_lists">
				<view class="shop_list" v-for="data in shoplist" @click="godetail(data)">
					<image class="shop_img" :src="oss(data.images[0])" mode="aspectFill"></image>
					<view class="shop_title">
						<image v-if="data.user.userlabel == 2" class="shop_label" src="../../static/index/label.png" mode="aspectFill"></image>
						<image v-if="data.user.userlabel == 1" class="shop_label" src="../../static/index/free.png" mode="aspectFill"></image>
						<text class="shop_name">{{data.name}}</text>
					</view>
					<view class="shop_info">
						<image class="user_tit" :src="oss(data.user.avatar)" mode="aspectFill"></image>
						<view class="user_name">
							{{data.user.nickname}}
						</view>
					</view>
					<view class="shop_price" v-if="data.price > 0">
						{{data.price}}<text class="yuan">元</text>
					</view>
					<view class="shop_price" v-else>
						面议
					</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				finish: false,
				list: [],
				name: '',
				barHeight: '',
				city: '',
				shoplist: [],
				// lng: '113.665412',
				// lat: '34.757975',
				lng: '',
				lat: '',
				// search: ''
				cate1_id: '',
				cate2_id: '',
				type: 0
			};
		},
		onLoad(options) {
			console.log(options)
			this.barHeight = uni.getSystemInfoSync().statusBarHeight
			// this.equiptype = uni.getSystemInfoSync().platform == 'ios' ? 2 : 1
			this.name = options.name
			if (options.id1) {
				this.cate1_id = options.id1
				this.cate2_id = options.id2
				
			}
			this.lat = uni.getStorageSync('lat');
			this.lng = uni.getStorageSync('lng');
			this.search()
		},
		methods: {
			// 跳转二手详情
			godetail(item) {
				// console.log(item)
				// uni.$u.route({
				// 	url: 'pagesA/index/index_detail',
				// 	params: {
				// 		id: item.id
				// 	}
				// })
				uni.$u.route({
					url: '/pagesA/index/usedDetail',
					params: {
						id: item.id
					}
				})
				// uni.navigateTo({
				// 	url:'/pagesA/index/usedDetail'
				// })
			},
			click(e) {
				console.log(e)
				this.type = e.index
				this.shoplist = []
				this.page = 1
				this.finish = ""
				this.search()
			},
			search() {
				if (this.finish) {
					return
				}

				let data = '';
				data = {
					page: this.page,
					word: this.name,
					cate1_id: this.cate1_id,
					cate_id: this.cate2_id,
					lng: this.lng,
					lat: this.lat
				}

				uni.$u.http.post('/searchfree', data).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.shoplist = this.shoplist.concat(res.data)

						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {})

			},
			lower() {
				this.page++
				this.search()
			},
			reload() {
				this.finish = false
				this.page = 1
				this.list = []
				this.search()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.searchBox {
		height: 100vh;
		display: flex;
		flex-direction: column;

		/deep/ .u-tabs__wrapper__nav__item {
			padding: 0 46px;
		}

		.header {
			display: flex;
			align-items: center;
			height: 88rpx;
			padding: 0 20rpx;
			// background: linear-gradient(to left, #FFC141, #FFDF41);
			/* #ifdef MP-WEIXIN */
			padding-right: 220rpx;

			/* #endif */


			.back {
				margin-right: 30rpx;
				width: 40rpx;
				height: 40rpx;
			}


		}

		.nav {
			display: flex;
			justify-content: center;
		}


		// 商品
		.shop {
			margin-top: 30rpx;
			flex: 1;
			overflow: hidden;

			.shop_lists {
				margin: 0rpx 30rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;


				.shop_list:nth-child(odd) {
					margin-right: 40rpx;
				}

				.shop_list {
					width: 323rpx;
					display: flex;
					flex-direction: column;

					.shop_img {
						width: 323rpx;
						height: 296rpx;
						border-radius: 20rpx;
					}

					.shop_title {
						margin: 20rpx 0;
						width: 323rpx;
						overflow: hidden;
						/*内容溢出隐藏*/
						text-overflow: ellipsis; //*溢出的文本显示为...*/
						display: -webkit-box;
						/*将div转换为盒子模型*/
						-webkit-line-clamp: 2;
						/*设置div的文本为2行*/
						-webkit-box-orient: vertical;
						/*从顶部向底部垂直布置子元素*/

						.shop_label {
							margin-right: 10rpx;
							width: 95rpx;
							height: 40rpx;
						}

						.shop_name {
							font-size: 28rpx;
							color: #3D3D3D;
							line-height: 40rpx;
						}
					}

					.shop_info {
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
						flex-direction: row;

						.user_tit {
							margin-right: 10rpx;
							width: 39rpx;
							height: 39rpx;
							border-radius: 50%;
						}

						.user_name {
							font-size: 28rpx;
							color: #676767;
							line-height: 40rpx;
						}
					}

					.shop_price {
						font-size: 36rpx;
						font-weight: bold;
						color: #E90000;
						line-height: 40rpx;

						.yuan {
							font-size: 20rpx;
							font-weight: 400;
							color: #3D3D3D;
							line-height: 40rpx;
						}
					}
				}

			}
		}

	}
</style>
